MkCard

Show source on GitHub

A card node, displaying an image, a button-like label and a hover caption.

Description

This node requires addtional CSS to work.

ExamplesDocStringsBase classes⋔ Inheritance diagramNodeFileCode

Example: With link

Jinja

{{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }}

Python

MkCard('Title', 'https://picsum.photos/300', target='https://phil65.github.io/mknodes/')

RenderedMarkdownHtml

Title

<a href="https://phil65.github.io/mknodes/">
<div class="card">
<div class="showcase-container">
<img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
</div>
<p>
<button>Title</button>
</p>
</div>
</a>

<p><a href="https://phil65.github.io/mknodes/"></p>
<div class="card">
<div class="showcase-container">
<img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
</div>
<p>
<button>Title</button>
</p>
</div>
<p></a></p>

Example: With caption

Jinja

{{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }}

Python

MkCard('Title', 'https://picsum.photos/300', caption='Caption')

RenderedMarkdownHtml

Caption

Title

<div class="card">
<div class="showcase-container">
<img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
<div class="overlay">Caption</div>
</div>
<p>
<button>Title</button>
</p>
</div>

<div class="card">
<div class="showcase-container">
<img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
<div class="overlay">Caption</div>
</div>
<p>
<button>Title</button>
</p>
</div>

Example: Separate dark mode image

Jinja

{{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }}

Python

MkCard('Title', 'https://picsum.photos/300', path_dark_mode='https://picsum.photos/200')

RenderedMarkdownHtml

Title

<div class="card">
<div class="showcase-container">
<img src="https://picsum.photos/300#only-light" alt="Title" style="width:200px,height:200px">
<img src="https://picsum.photos/200#only-dark" alt="Title" style="width:200px,height:200px">
</div>
<p>
<button>Title</button>
</p>
</div>

<div class="card">
<div class="showcase-container">
<img src="https://picsum.photos/300#only-light" alt="Title" style="width:200px,height:200px">
<img src="https://picsum.photos/200#only-dark" alt="Title" style="width:200px,height:200px">
</div>
<p>
<button>Title</button>
</p>
</div>

Bases: MkTemplate

__init__

__init__(
    title: str,
    image: str,
    *,
    caption: str | None = None,
    target: LinkableType | None = None,
    size: int = CARD_DEFAULT_SIZE,
    path_dark_mode: str | None = None,
    **kwargs: Any
)

Parameters:

Name	Type	Description	Default
title	str	Button text	required
image	str	Card image	required
caption	str | None	Image caption	None
target	LinkableType | None	Link target. Can be a URL, an MkPage, or an MkNav	None
size	int	Height/Width of the card	CARD_DEFAULT_SIZE
path_dark_mode	str | None	Optional alternative image for dark mode	None
kwargs	Any	keyword arguments passed to parent	{}

Name	Children	Inherits
MkTemplate mknodes.templatenodes.mktemplate Node representing a jinja template.	MkCliDoc MkMaterialBadge MkImageCompare MkImageSlideshow MkIFrame MkCard MkInstallGuide MkCodeOfConduct MkCommitConventions MkPullRequestGuidelines MkDevEnvSetup ...	MkContainer

graph TD
  94721312420752["mkcard.MkCard"]
  94721308869584["mktemplate.MkTemplate"]
  94721311697232["mkcontainer.MkContainer"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721308869584 --> 94721312420752
  94721311697232 --> 94721308869584
  94721308848336 --> 94721311697232
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592

/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkcard/metadata.toml

[metadata]
icon = "mdi:square-medium"
status = "new"
name = "MkCard"
group = "image"

[[resources.css]]
filename = "grid.css"

[examples.with_link]
title = "With link"
jinja = """
{{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }}
"""

[examples.with_caption]
title = "With caption"
jinja = """
{{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }}
"""

[examples.dark_mode_image]
title = "Separate dark mode image"
jinja = """
{{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }}
"""

[output.markdown]
template = """
{% set image = (node.image ~ "#only-light") if node.path_dark_mode else node.image %}
{% if node.target %}<a href="{{ node.target | get_url }}">
{% endif %}
<div class="card">
<div class="showcase-container">
<img src="{{ image }}" alt="{{ node.title }}" style="width:{{ node.size }}px,height:{{ node.size }}px">
{% if node.path_dark_mode %}<img src="{{ node.path_dark_mode }}#only-dark" alt="{{ node.title }}" style="width:{{ node.size }}px,height:{{ node.size }}px">
{% endif %}
{% if node.caption %}<div class="overlay">{{ node.caption }}</div>
{% endif %}
</div>
<p>
<button>{{ node.title }}</button>
</p>
</div>
{% if node.target %}</a>
{% endif %}
"""

class MkCard(mktemplate.MkTemplate):
    """A card node, displaying an image, a button-like label and a hover caption.

    This node requires addtional CSS to work.
    """

    ICON = "material/square-medium"
    STATUS = "new"
    CSS = [resources.CSSFile("grid.css")]

    def __init__(
        self,
        title: str,
        image: str,
        *,
        caption: str | None = None,
        target: linkprovider.LinkableType | None = None,
        size: int = CARD_DEFAULT_SIZE,
        path_dark_mode: str | None = None,
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            title: Button text
            image: Card image
            caption: Image caption
            target: Link target. Can be a URL, an MkPage, or an MkNav
            size: Height/Width of the card
            path_dark_mode: Optional alternative image for dark mode
            kwargs: keyword arguments passed to parent
        """
        super().__init__("output/markdown/template", **kwargs)
        self.target = target
        self.title = title
        self.image = image
        self.caption = caption
        self.size = size
        self.path_dark_mode = path_dark_mode

    @classmethod
    def for_page(cls, page):
        image = mkbinaryimage.MkBinaryImage.for_icon(page.icon)
        card = MkCard(
            page.title,
            image=image.path,
            caption=page.subtitle or "",
            target=page,
        )
        card.add_file(image.path, image.data)
        return card